<template>
    <div>
        <div class="head_box" @click="$navigate.to('/pages/relationship/detail?id=' + userItem.userId)">
            <relationshipItem v-if="userItem.userId" :item="userItem" isMine></relationshipItem>
            <div class="show">
                <div class="show_item">
                    <em v-if="userItem.vip == '01'">×6倍</em>
                    <p>{{userItem.showCnt}}</p>
                    <span>展示(次)</span>
                </div>
                <div class="show_item">
                    <p>{{userItem.clickCount}}</p>
                    <span>被查看(次)</span>
                </div>
                <div class="show_item">
                    <p>{{userItem.collectCount}}</p>
                    <span>被添加(次)</span>
                </div>
            </div>
            <div class="btn" @click.stop="$navigate.toVip()">
                <p>我要加倍展示</p>
                <span>最高可×10倍</span>
            </div>
        </div>
        <div class="list" >
            <div class="list_filter">
                <div class="city">
                    <pub-area-picker @change="areaPickerChange" showAll :showArea="false">
                        <div class="city_name flex">
                            <span>{{city || province || '全部地区'}}</span>
                            <i class="fs20 color-999 icon-arrow-bottom-triangle-solid"></i>
                        </div>
                    </pub-area-picker>
                </div>
                <div class="job flex-v-center" @click="jobPick">
                    <span> {{typeIdName || '职业'}} </span>
                    <i class="fs20 color-999 icon-arrow-bottom-triangle-solid"></i>
                </div>
                <div class="search flex-v-center" @click="openSearch">
                    <i class="icon-search mar-r10 placeholder"></i>
                    <p class="input" :class="{placeholder: !industryName}">{{industryName || '查找行业/品牌'}}</p>
                </div>
            </div>
            <div class="ship_list">
                <div class="ship_item" v-for="(item, index) in list" :key="index"> 
                    <relationshipItem :item="item"/> 
                </div>
            </div>
            <pub-list-end :loading="scroll.loading" :max="scroll.max" :noData="scroll.noData"></pub-list-end>
        </div>
        <jobPicker ref="jobPicker"></jobPicker>
        <industryBrandPicker ref="industryBrandPicker"></industryBrandPicker>
        
    </div>
</template>

<script>
import relationshipItem from '@/components/pages/relationshipItem'
import jobPicker from '@/components/pages/jobPicker'
import industryBrandPicker from '@/components/pages/industryBrandPicker'
import { getSquareUsers, getUserCardInfo } from '@/request/relationship'
export default {
    components: {
        relationshipItem,
        industryBrandPicker,
        jobPicker
    },
    data() {
        return {
            industryIds: '',
            industryName: '',

            typeIdStrs: '',
            typeIdName: '',

            province: '',
            city: '',
            userItem: {},

            list: [],
            scroll: {
                page: 1,
                size: 30,
                loading: false,
                max: false,
                noData: false,
            },
        }
    },
    computed: {

    },
    onLoad(options) { },
    onShow() {
        this.onRefresh()
        this.getUserInfo()
    },
    onReachBottom() {
        this.onInfinite()
    },
    methods: {
        getUserInfo() {
            getUserCardInfo({
                toUserId: this.$store.state.user.userInfo.userId
            }).then(res => {
                this.userItem = res.data.info
            })
        },
        getList(complete) {
            getSquareUsers({
                industryIdStrs: this.industryIds,
                typeIdStrs: this.typeIdStrs,
                province: this.province,
                city: this.city,
                pageIndex: this.scroll.page,
                pageSize: this.scroll.size,
            }, { complete }).then(res => {
                this.list = this.scroll.page == 1 ? res.data.list : this.list.concat(res.data.list)
                this.scroll.max = res.data.pageNum == res.data.pages
                this.scroll.noData = res.data.total == 0
            })
        },
        // 重头第一页刷新列表
        onRefresh() {
            this.scroll.loading = true
            this.scroll.max = false
            this.scroll.noData = false
            this.scroll.page = 1
            this.list = []
            this.getList(() => {
                this.scroll.loading = false;
                uni.stopPullDownRefresh()
            })
        },
        // 滚动到底部加载
        onInfinite() {
            if(this.scroll.loading || this.scroll.max) return
            this.scroll.loading = true
            this.scroll.page += 1
            this.getList(() => {
                this.scroll.loading = false
            })
        },
        openSearch() {
            this.$refs.industryBrandPicker.open().then(rst => {
                if(rst) {
                    this.industryIds = rst.id
                    this.industryName = rst.industryName
                } else {
                    this.industryIds = ''
                    this.industryName = ''
                }
                this.onRefresh()
            })
        },
        areaPickerChange(e) {
            this.province = e.province == '全部' ? void 0 : e.province
            this.city = e.city == '全部' ? void 0 : e.city
            console.log(e);
        },
        jobPick() {
            this.$refs.jobPicker.open().then(rst => {
                if(rst) {
                    this.typeIdStrs = rst.id
                    this.typeIdName = rst.typeName
                } else {
                    this.typeIdStrs = ''
                    this.typeIdName = ''
                }
                this.onRefresh()
            })
        }
    }
}
</script>

<style lang="less" scoped>
.head_box{
    width: 690rpx;
    margin: 30rpx;
    background: #fff;
    border-radius: 20rpx;
    padding: 30rpx;
    
    .show{
        padding-top: 30rpx;
        display: flex;
        justify-content: center;
        .show_item{
            width: 200rpx;
            height: 100rpx;
            position: relative;
            .align(center, column);
            &::after{
                content: "";
                position: absolute;
                width: 1px;
                height: 40rpx;
                background: #ddd;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
            }
            &:last-child::after{
                display: none;
            }
            p{
                font-size: 40rpx;
                font-weight: bold;
                line-height: 40rpx;
            }
            span{
                line-height: 30rpx;
                margin-top: 10rpx;
                font-size: 26rpx;
                color: #999;
            }
            em{
                position: absolute;
                top: -15rpx;
                left: 50%;
                margin-left: 15rpx;
                font-size: 20rpx;
                color: @mainColor;
                background: #f9d7d9;
                line-height: 30rpx;
                padding: 0 10rpx;
                border-radius: 15rpx 12rpx 12rpx 0;
            }
        }
    }

    .btn{
        width: 100%;
        height: 90rpx;
        margin-top: 10rpx;
        border-radius: 16rpx;
        background: #f76035;
        color: #fff;
        .align(center, column);
        .gradient(#ef7d57, #e13143);
        p{
            font-size: 32rpx;
            font-weight: bold;
        }
        span{
            font-size: 24rpx;
        }
    }

}

.list{
    padding-bottom: 200rpx;
}
.list_filter{
    width: 100%;
    height: 90rpx;
    background: #fff;
    border-bottom: 1px solid #ddd;
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    .city{
        margin-right: 20rpx;
        .city_name{
            width: 150rpx;
            span{
                margin-right: 5rpx;
                .overflow();
            }
        }
    }
    .job{
        max-width: 150rpx;
        margin-right: 20rpx;
        display: flex;
        span{
            flex: 1;
            margin-right: 5rpx;
            .overflow();
        }
    }
    .search{
        flex: 1;
        padding: 0 20rpx;
        height: 65rpx;
        border-radius: 40rpx;
        background-color: #f1f1f1;
    }
}
.ship_list{
    .ship_item{
        background: #fff;
        padding: 30rpx;
        margin-bottom: 20rpx;
    }
}


</style>